<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { graphic } from "echarts/core";
import { ranking } from "@/api";
import { ElMessage } from "element-plus";


const props = defineProps({
  data: {
    type: Array,
    default: () => [
      {
        label:'管理性',
        percentage: 24,
        value: 120
      },
      ],
  },
});

// const areaName = ref([]);
// const xArr = ref([]);

// const option = ref({});
// const getData = () => {
//   ranking({ type: props.type })
//     .then((res) => {
//       if (res.success) {
//         areaName.value = res.data.map((item) => item.name);
//         xArr.value = res.data.map((item) => item.value);
//         setOption();
//       } else {
//         ElMessage.error(res.msg);
//       }
//     })
//     .catch((err) => {
//       ElMessage.error(err);
//     });
// };

// onMounted(() => {
//   getData();
// })

const format = (val)=>{
  return val
}

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]


</script>

<template>
  <div class="progressContent">
    <div v-for="item in props.data" :key="item.label">
      <el-progress type="circle" :percentage="item.percentage" :stroke-width="18" :color="colors" :format="format" stroke-linecap="butt">
      <template #default>
        <div class="percentage-value">{{ item.value }}</div>
      </template>
    </el-progress>
    <div class="percentage-label">{{item.label}}</div>
    </div>
    
  </div>
</template>

<style scoped lang="scss">
.progressContent{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  text-align: center;
  .percentage-value{
    font-size: 36px;
    font-weight: 600;
    color: rgba(2, 167, 240);
    background-color: rgba(255, 255, 255,0.8);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    text-align: center;
    line-height: 90px;
    margin: auto;
  }
  .percentage-label{
    font-weight: 500;
  }
}
</style>
